<!-- 模板 -->
<template>
  <div class="order">
    <!-- 1、标题 -->
    <div class="title">
      <div class="text">现在预约<br />享受8折优惠</div>
      <div class="left wow bounceInDown"></div>
      <div class="right wow bounceInDown"></div>
    </div>
    <!-- 2、表单 -->
    <div class="form wow fadeIn">
      <div class="form-item wow bounceInDown">
        <div class="label">用户名</div>
        <input
          ref="user"
          type="text"
          class="user"
          v-model="order.name"
          placeholder="输入用户名"
          @blur="checkUser"
        />
      </div>
      <div class="form-item wow bounceInDown" data-wow-delay="0.5s">
        <div class="label">电话</div>
        <input
          type="text"
          ref="tel"
          class="tel"
          v-model="order.tel"
          @blur="checkTel"
          placeholder="输入电话"
        />
      </div>
      <div class="form-item wow bounceInDown" data-wow-delay="0.8s">
        <div class="label">留言</div>
        <textarea
          class="msg"
          ref="msg"
          v-model="order.msg"
          @blur="checkMsg"
          placeholder="输入留言"
        />
      </div>
      <div class="form-item wow bounceInLeft">
        <div class="label">装修类型</div>
        <van-checkbox-group v-model="result" @change="checkType">
          <van-row>
            <van-col :span="8">
              <van-checkbox name="家居"> 家居 </van-checkbox>
            </van-col>
            <van-col :span="8">
              <van-checkbox name="公司"> 公司</van-checkbox>
            </van-col>
            <van-col :span="8">
              <van-checkbox name="酒吧">酒吧</van-checkbox>
            </van-col>
            <van-col :span="8">
              <van-checkbox name="酒店">酒店</van-checkbox>
            </van-col>
            <van-col :span="8">
              <van-checkbox name="旅馆">旅馆</van-checkbox>
            </van-col>
            <van-col :span="8">
              <van-checkbox name="网吧">网吧</van-checkbox>
            </van-col>
            <van-col :span="8">
              <van-checkbox name="超市">超市</van-checkbox>
            </van-col>
            <van-col :span="8">
              <van-checkbox name="药房">药房</van-checkbox>
            </van-col>
            <van-col :span="8">
              <van-checkbox name="学校">学校</van-checkbox>
            </van-col>
          </van-row>
        </van-checkbox-group>
      </div>
      <div class="form-item wow bounceInLeft">
        <div class="label" @click="show = true">选则日期</div>
        <van-cell :value="date" @click="show = true" />
        <van-calendar v-model="show" @confirm="onConfirm" />
      </div>
      <div class="form-item submit-wrap wow bounceInDown">
        <van-button type="info" class="submit" @click="submit">
          点击预约
        </van-button>
      </div>
    </div>
    <!-- 3、页脚 -->
    <div class="foot wow slideInUp"></div>
    <!-- 4、导航条 -->
    <Tabbar :active="1"></Tabbar>
  </div>
</template>

<script>
import Tabbar from './Tabbar.vue'
import { request } from '../utils/request'
export default {
  name: '',
  data() {
    return {
      order: {
        name: '',
        msg: '',
        tel: '',
      },
      result: [],
      show: false,
      date: '',
    }
  },
  components: { Tabbar },
  methods: {
    //点击提交预约
    async submit() {
      //提交表单
      //1、验证表单,flag=0|1,0表示未通过验证，1表示通过验证
      let flag =
        this.checkDate() &
        this.checkType() &
        this.checkTel() &
        this.checkMsg() &
        this.checkUser()
      if (!flag) {
        return
      }
      //验证通过
      let options = {
        url: 'order',
        type: 'post',
        data: {
          name: this.order.name,
          phone: this.order.tel,
          type: this.result.join(','),
          orderDate: this.date,
          message: this.order.msg,
        },
      }
      let { data: res } = await request(options)
      console.log(res)
      if (res.code !== 200) {
        return this.$toast(res.msg)
      }
      this.$toast(res.msg)
      //可以执行页面的跳转业务
      //重置表单
      this.order = {
        name: '',
        msg: '',
        tel: '',
      }
      this.result = []
      this.date = ''
    },
    //格式化日期函数
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    //点击日历的确认按钮执行的操作
    onConfirm(date) {
      this.date = this.formatDate(date)
      this.show = false
    },
    //验证日期
    checkDate() {
      if (!this.date) {
        this.$toast('请选择日期')
        return false
      }
      return true
    },
    //验证装修类型
    checkType() {
      console.log(this.result)
      if (this.result.length === 0) {
        this.$toast('装修类型至少选一个')
        return false
      }
      return true
    },
    //验证用户名
    checkUser() {
      let user = this.$refs['user']
      let v = user.value
      let parent = user.parentNode
      let className = parent.className
      let reg = /(^[\u4e00-\u9fa5]{2,16}$)|(^[a-z]{2,16}$)/
      if (!v || !reg.test(v)) {
        if (className.indexOf('error') === -1) {
          className += ' error'
        }
        this.$toast('用户名全汉字或全英文2-16位')
        parent.className = className
        return false
      }
      className = className.replace('error', '')
      parent.className = className
      return true
    },
    //验证电话号码
    checkTel() {
      let tel = this.$refs['tel']
      let v = tel.value
      let parent = tel.parentNode
      let className = parent.className
      let reg = /^1[3456789]\d{9}$/
      if (!v || !reg.test(v)) {
        this.$toast('非法的电话号码')
        if (className.indexOf('error') === -1) {
          className += ' error'
        }
        parent.className = className
        return false
      }
      className = className.replace('error', '')
      parent.className = className
      return true
    },
    //验证留言
    checkMsg() {
      let msg = this.$refs['msg']
      let v = msg.value
      let parent = msg.parentNode
      let className = parent.className
      if (!v) {
        if (className.indexOf('error') === -1) {
          //添加error类名
          className += ' error'
        }
        this.$toast('留言不能空')
        parent.className = className
        return false
      }
      //移除error类名
      className = className.replace('error', '')
      parent.className = className
      return true
    },
  },
  created() {},
  mounted() {
    let _this = this
    //页面渲染结束再执行动画
    this.$nextTick(() => {
      new _this.WOW({ live: false }).init()
    })
  },
  //侦听器：侦听所有的资源的变化
  watch: {
    //监听this.show的变化，实现验证功能
    show() {
      if (!this.show && !this.date) {
        this.$toast('请选择一个日期')
      }
    },
  },
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'zfj';
  src: url('../assets/fonts/1617269125.ttf');
}
.van-calendar {
  bottom: 1.3rem;
}
.van-col {
  padding: 0.1rem;
}
.van-cell {
  height: 0.8rem;
  padding-left: 1em;
  border: 1px solid #2ebbb0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 0.1rem;
  margin: 0.1rem 0;
  font-size: 0.32rem;
  font-family: '微软雅黑' !important;
  color: #646566;
}
.order {
  font-family: zfj !important;
  width: 100%;
  padding-bottom: 1.3rem;
  background-image: url('../assets/img/bk.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .title {
    font-size: 0.8rem;
    color: #fff;
    text-align: center;
    padding-top: 0.6rem;
    line-height: 1rem;
    position: relative;
    .text {
      animation: heartBt 2s linear infinite;
    }

    .left {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      height: 100%;
      width: 40%;
      background-image: url('../assets/img/hd.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position-x: -1.4rem;
      background-position-y: 0.5rem;
    }
    .right {
      width: 40%;
      height: 100%;
      top: 0;
      right: 0;
      z-index: 1;
      position: absolute;
      background-image: url('../assets/img/hd.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position-x: 1.5rem;
      background-position-y: 0.35rem;
    }
  }

  //form表单
  .form {
    background-color: rgba(255, 255, 255, 0.8);
    width: 95%;
    margin: 0.2rem auto;
    border-radius: 0.3rem;
    padding: 0.4rem;
    .form-item {
      padding: 0.1rem;
      color: #323233;
      font-size: 0.32rem;
      .label {
        font-weight: 700;
      }
      input {
        width: 100%;
        outline: none;
        border: none;
        border: 1px solid #2ebbb0;
        height: 0.8rem;
        margin: 0.1rem 0;
        padding-left: 1em;
        border-radius: 0.1rem;
      }
      .msg {
        width: 100%;
        height: 2rem;
        margin: 0.1rem 0;
        outline: none;
        border: none;
        border: 1px solid #2ebbb0;
        border-radius: 0.1rem;
        padding: 0.2rem;
        padding-left: 1em;
      }
    }
    .error {
      input {
        border: 1px solid red;
      }
      .msg {
        border: 1px solid red;
      }
    }
    .submit-wrap {
      display: flex;
      .submit {
        flex: 1;
        height: 1rem;
        border-radius: 0.1rem;
        background-color: #32b8ae;
        border: none;
        outline: none;
      }
    }
  }

  //foot页脚
  .foot {
    height: 2rem;
    background-image: url('../assets/img/bottom.png');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 95%;
    margin: 0.3rem auto 0;
    background-position: center bottom;
  }
}
</style>
